﻿<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片试图区域 -->
        <el-card>
            <!-- 搜索与添加区域 -->

            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入搜索的权限名称"
                              class="input-with-select"
                              v-model="queryInfo.query"
                              clearable
                              @clear="getSysPermissionList">
                        <el-button slot="append"
                                   icon="el-icon-search"
                                   @click="getSysPermissionList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="showAddOrEditDialog()">添加权限</el-button>
                </el-col>
            </el-row>
            <!-- 权限列表 -->

            <tree-table class="tree-table"
                        :selection-type="false"
                        :expand-type="false"
                        :data="sysPermissionList"
                        :columns="columns"
                        :show-index="true"
                        border
                        stripe
                        show-row-hover
                        tree-type>
                <template slot="typeName" slot-scope="scope">
                    <el-tag v-if="scope.row.typeName === '分组'">
                        {{ scope.row.typeName }}
                    </el-tag>
                    <el-tag type="success" v-else-if="scope.row.typeName === '菜单'">
                        {{ scope.row.typeName }}
                    </el-tag>
                    <el-tag type="info" v-else-if="scope.row.typeName === '接口'">
                        {{ scope.row.typeName }}
                    </el-tag>
                </template>
                <template slot="opt" slot-scope="scope">
                    <!-- 修改按钮 -->
                    <el-button type="primary"
                               icon="el-icon-edit"
                               size="mini"
                               @click="showAddOrEditDialog(scope.row.id)">编辑权限</el-button>
                    <!-- 删除按钮 -->
                    <el-button type="danger"
                               icon="el-icon-delete"
                               size="mini"
                               @click="removeSysPermissionById(scope.row.id)">删除权限</el-button>
                </template>
            </tree-table>
        </el-card>

        <!-- 添加权限的对话框 -->
        <el-dialog :title="(addOrEditForm.id > 0 ? '编辑' : '新增') + '权限'"
                   :visible.sync="addOrEditDialogVisible"
                   width="60%"
                   @close="addOrEditDialogClosed">
            <!-- 内容主体区域 -->

            <el-tabs v-model="activeName">
                <el-tab-pane label="权限管理" name="first">
                    <el-form :model="addOrEditForm"
                             :rules="addOrEditFormRules"
                             ref="addOrEditFormRef"
                             label-width="120px">
                        <el-input v-model="addOrEditForm.id"
                                  prop="id"
                                  type="hidden"></el-input>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="名称：" prop="label">
                                    <el-input v-model="addOrEditForm.label"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="父级节点：" prop="parentIds">
                                    <el-cascader v-model="selectedKeys"
                                                 :options="groupTree"
                                                 style="width: 100%"
                                                 placeholder="试试搜索关键词"
                                                 :props="{
                      expandTrigger: 'hover',
                      value: 'id',
                      label: 'label',
                      children: 'children',
                    }"
                                                 @change="parentKeyChange"
                                                 filterable
                                                 clearable
                                                 change-on-select="true"></el-cascader>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="权限类型：" prop="type">
                                    <el-select v-model="addOrEditForm.type"
                                               placeholder="请选择"
                                               style="width: 100%">
                                        <el-option v-for="item in permissionTypeOptions"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="权限编码：" prop="code">
                                    <el-input v-model="addOrEditForm.code"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="接口：" prop="apiId">
                                    <el-input v-model="addOrEditForm.api"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="视图：" prop="viewId">
                                    <el-input v-model="addOrEditForm.view"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label=" 图标：" prop="icon">
                                    <el-input v-model="addOrEditForm.icon"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="菜单访问地址：" prop="path">
                                    <el-input v-model="addOrEditForm.path"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label=" 可关闭：" prop="closable">
                                    <el-switch v-model="addOrEditForm.closable"
                                               active-text="是"
                                               inactive-text="否">
                                    </el-switch>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label=" 是否隐藏：" prop="hidden">
                                    <el-switch v-model="addOrEditForm.hidden"
                                               active-text="是"
                                               inactive-text="否">
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label=" 打开新窗口：" prop="newWindow">
                                    <el-switch v-model="addOrEditForm.newWindow"
                                               active-text="是"
                                               inactive-text="否">
                                    </el-switch>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label=" 打开组：" prop="opened">
                                    <el-switch v-model="addOrEditForm.opened"
                                               active-text="是"
                                               inactive-text="否">
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label=" 排序：" prop="sort">
                                    <el-input v-model="addOrEditForm.sort"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label=" 链接外显：" prop="external">
                                    <el-switch v-model="addOrEditForm.external"
                                               active-text="是"
                                               inactive-text="否">
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label=" 描述：" prop="description">
                                    <el-input v-model="addOrEditForm.description"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
            </el-tabs>

            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addOrEditDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrEditSysPermission()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { listToTree, getTreeParents } from '../../utils/tree.js'
    import { postRequest } from '@/utils/api.js'
    export default {
        data() {

            return {
                queryInfo: {
                    query: '',
                },

                sysPermissionList: [],
                activeName: 'first',
                // 控制添加权限对话框的显示与隐藏
                addOrEditDialogVisible: false,
                // 添加权限的表单数据
                addOrEditForm: {
                    id: '',
                    parentId: -1,
                    label: '',
                    code: '',
                    type: '',
                    view: '',
                    api: '',
                    path: '',
                    icon: '',
                    hidden: true,
                    closable: true,
                    opened: true,
                    newWindow: true,
                    external: '',
                    sort: 0,
                    description: '',


                },
                permissionTypeOptions: [{
                    value: 1,
                    label: '分组'
                }, {
                    value: 2,
                    label: '菜单'
                }, {
                    value: 3,
                    label: '接口'
                }, {
                    value: 4,
                    label: '权限点'
                }],
                groupTree: [],//编辑权限 父选框
                selectedKeys: [],

                editState: false, //编辑状态

                // 添加表单的验证规则对象
                addOrEditFormRules: {
                    parentId: [{ required: true, message: '请输入父级节点', trigger: 'change' },
                    ],
                    selectedKeys: [{ required: true, message: '请选择父级', trigger: 'change' }],
                    label: [{ required: true, message: '请输入权限名称', trigger: 'blur' },
                    { max: 50, message: '权限名称的长度在50字符之内', trigger: 'blur' },
                    ],
                    code: [{ required: true, message: '请输入权限编码', trigger: 'blur' },
                    { max: 550, message: '权限编码的长度在550字符之内', trigger: 'blur' },
                    ],
                    type: [{ required: true, message: '请输入权限类型', trigger: 'blur' },
                    ],
                    view: [{ required: false, message: '请输入视图', trigger: 'blur' },
                    ],
                    api: [{ required: false, message: '请输入接口', trigger: 'blur' },
                    ],
                    path: [{ required: false, message: '请输入菜单访问地址', trigger: 'blur' },
                    { max: 500, message: '菜单访问地址的长度在500字符之内', trigger: 'blur' },
                    ],
                    icon: [{ required: false, message: '请输入 图标', trigger: 'blur' },
                    { max: 100, message: ' 图标的长度在100字符之内', trigger: 'blur' },
                    ],
                    hidden: [{ required: false, message: '请选择是否隐藏', trigger: 'blur' },
                    ],
                    closable: [{ required: false, message: '请输入 可关闭', trigger: 'blur' },
                    ],
                    opened: [{ required: false, message: '请输入 打开组', trigger: 'blur' },
                    ],
                    newWindow: [{ required: false, message: '请输入 打开新窗口', trigger: 'blur' },
                    ],
                    external: [{ required: false, message: '请输入 链接外显', trigger: 'blur' },
                    ],
                    sort: [{ required: false, message: '请输入 排序', trigger: 'blur' },
                    ],
                    description: [{ required: false, message: '请输入 描述', trigger: 'blur' },
                    { max: 100, message: ' 描述的长度在100字符之内', trigger: 'blur' },
                    ],

                },
                // 控制修改权限对话框的显示与隐藏
                editDialogVisible: false,

                columns: [
                    {
                        label: '权限名称',
                        minWidth: '260px',
                        prop: 'label'
                    },
                    {
                        label: '权限类型',
                        prop: 'typeName',
                        type: 'template',
                        template: 'typeName',
                    },
                    {
                        label: '视图',

                        prop: 'view'
                    },
                    {
                        label: '接口',
                        width: '200px',
                        prop: 'api'
                    },
                    {
                        label: '菜单访问地址',
                        width: '230px',
                        prop: 'path'
                    },
                    {
                        label: '图标',
                        prop: 'icon',
                        minWidth: '160px',
                    },
                    {
                        label: '描述',
                        width: '200px',
                        prop: 'description'
                    },
                    {
                        label: '操作',
                        minWidth: '300px',
                        type: 'template',
                        template: 'opt',
                    },
                ]
            }
        },
        created() {
            this.getSysPermissionList()
        },
        methods: {
            async getSysPermissionList() {

                var data = await getPermissionList(this.$sysPermissionManagerUrl, { queryString: this.queryInfo.query, })
                this.sysPermissionList = listToTree(data)
                console.log(res)
            },
            async getPermissionList(url, params) {
                const { data: res } = await this.$http.post(url, params)
                if (res.code !== 200) {
                    return this.$message.error('获取数据失败！')
                }
                var data = res.data.list
                return data
            },
            //获取指定的权限标识
            getPermissionType(typeName) {
                if (typeName === '分组') {
                    return 'primary'
                }

                if (typeName === '菜单') {
                    return 'warning'
                }
                if (typeName === '接口') {
                    return 'info'
                }
                return 'info'
            },
            // 监听添加权限对话框的关闭事件
            addOrEditDialogClosed() {
                this.editState = false //编辑状态改为false
                this.addOrEditForm = {
                    id: '',
                    parentId: '',
                    label: '',
                    code: '',
                    type: '',
                    viewId: '',
                    apiId: '',
                    path: '',
                    icon: '',
                    hidden: '',
                    closable: '',
                    opened: '',
                    newWindow: '',
                    external: '',
                    sort: '',
                    description: '',


                }, this.groupTree = [],
                    this.selectedKeys = [],//重置父级分类选中内容
                    this.$refs.addOrEditFormRef.resetFields()
            },
            // 点击按钮，添加权限
            addOrEditSysPermission() {
                this.$refs.addOrEditFormRef.validate(async (valid) => {
                    if (!valid) return

                    if (this.addOrEditForm.id > 0) {

                        //编辑状态
                        // 发起修改权限信息的数据请求
                        const { data: res } = await this.$http.put(
                            this.$sysPermissionManager_EditSysPermissionUrl,
                            this.addOrEditForm
                        )

                        if (res.code !== 200) {
                            return this.$message.error('更新权限信息失败！')
                        }

                        // 提示修改成功
                        this.$message.success('更新权限信息成功！')
                    } else {
                        // 可以发起添加权限的网络请求
                        const { data: res } = await this.$http.post(
                            this.$sysPermissionManager_CreateSysPermissionUrl,
                            this.addOrEditForm
                        )

                        if (res.code !== 200) {
                            this.$message.error('添加权限失败！')
                        }

                        this.$message.success('添加权限成功！')
                    }

                    // 隐藏添加权限的对话框
                    this.addOrEditDialogVisible = false
                    // 重新获取权限列表数据
                    this.getSysPermissionList()
                })
            },
            // 根据Id删除对应的权限信息
            async removeSysPermissionById(id) {
                // 弹框询问权限是否删除数据
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该权限, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).catch((err) => err)

                // 如果权限确认删除，则返回值为字符串 confirm
                // 如果权限取消了删除，则返回值为字符串 cancel
                // console.log(confirmResult)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }

                const { data: res } = await this.$http.delete(
                    this.$sysPermissionManager_DeleteSysPermissionUrl + '?id=' + id
                )

                if (res.code !== 200) {
                    return this.$message.error('删除权限失败！')
                }

                this.$message.success('删除权限成功！')
                this.getSysPermissionList()
            },

            // 展示权限的对话框
            async showAddOrEditDialog(id) {
                this.addOrEditDialogVisible = true
                var tempData = getPermissionList(this.$sysPermissionManagerUrl, {
                    queryString: ''
                })
                // 分组树
                const groups = tempData.filter(l => l.type === 1)
                this.groupTree = listToTree(_.cloneDeep(groups), {
                    id: 0,
                    parentId: 0,
                    label: '根节点'
                })

                if (id > 0) {
                    //编辑状态
                    // console.log(id)
                    const { data: res } = await this.$http.get(
                        this.$sysPermissionManager_GetSysPermissionUrl + '?id=' + id
                    )

                    if (res.code !== 200) {
                        return this.$message.error('查询权限信息失败！')
                    }

                    this.addOrEditForm = res.data
                    const parents = getTreeParents(_.cloneDeep(this.groupTree), id);
                    this.selectedKeys = parents.map(p => p.id)

                    console.log("selectedKeys的值：" + this.selectedKeys)
                    this.editState = true

                }

                this.addOrEditDialogVisible = true
            },
            //新增和编辑框中的父级分类 改变触发事件
            parentKeyChange() {
                console.log(this.selectedKeys)
                if (this.selectedKeys.length > 0) {
                    this.addOrEditForm.parentId = this.selectedKeys[this.selectedKeys.length - 1]
                } else {
                    this.addOrEditForm.parentId = 0
                }
            },

        },
    }
</script>
<style lang="less" scoped>
</style>

